<template>
	<view class="userinfo-setting">
		<view class="status_bar"></view>
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">个人信息设置</view>
				<text class="save" @click="postchangeinfo(from)">保存</text>
			</view>
		</view>
		<view class="user-avater" v-if="userinfo">
			<image v-if="!userinfo.avatar" src="/static/img/teacheravater.png" mode=""></image>
			<image v-else :src="`https://www.aikoolearn.com/video-dev${userinfo.avatar}`"></image>
			<p @click="toggleShowContent">更换头像</p>
		</view>

		<view class="user-info" v-if="userinfo">
			<p class="info-title">个人信息</p>
			<wu-cell title="账号" :value="userinfo.userName"></wu-cell>
			<wu-cell title="昵称">
				<input slot="value" focus :placeholder="from.nickName" v-model="from.nickName" />
			</wu-cell>
			<wu-cell title="性别">
				<radio-group name="sex" slot="value" @change="radioChange">
					<label>
						<radio :value="'0'" :checked="'0' === from.sex" />
						<text>男</text>
					</label>
					<label>
						<radio :value="'1'" :checked="'1' === from.sex" />
						<text>女</text>
					</label>
				</radio-group>
			</wu-cell>
		</view>
		<view class="" v-show="showangle">
			<qf-image-cropper :width="500" :height="500" @crop="handleCrop" :src="imgurl"></qf-image-cropper>
		</view>
	</view>
</template>

<script>
import { changeinfo, getInfo } from '@/services/user.js';
export default {
	data() {
		return {
			userinfo: null,
			from: {},
			showangle: false,
			params: {
				sex: 0
			},
			show: false,
			actions: [
				{
					name: '拍照/上传头像'
				},
				{
					name: '恢复默认头像'
				}
			],
			imgurl: ''
		};
	},
	onLoad() {
		this.getInfo()
	},
	methods: {
		async getInfo() {
			const res = await getInfo();
			if (res.code == 200) {
				this.userinfo = res.user;
				this.from.sex = this.userinfo.sex;
				this.from.nickName = this.userinfo.nickName;
				uni.setStorageSync('userInfo', JSON.stringify(res.user));
			}else{
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 500
				});
			}
		},
		handleCrop(e) {
			uni.uploadFile({
				//请求的url接口地址
				url: 'https://www.aikoolearn.com/video-dev' + '/common/upload', //真实的接口地址

				fileType: 'image', //图片类型
				filePath: e.tempFilePath, //哪张图片
				name: 'file', //对应接口的文件名称
				header: {
					//请求头
					authorization: uni.getStorageSync('Authorization')
				},
				success: (res) => {
					console.log(res, '上传后的结果');
					let file = res.data;
					file = JSON.parse(file);
					if (file.code == 200) {
						this.$set(this.userinfo, 'avatar', file.fileName);
						this.showangle = false;
						this.postchangeinfo({ avatar: file.fileName });
					}
				},
				fail: (err) => {
					//上传图片失败失败的回调
					console.log(err);
				}
			});
		},
		async postchangeinfo(data) {
			const res = await changeinfo(data);
			if (res.code == 200) {
				uni.setStorageSync('userInfo', JSON.stringify({ ...this.userinfo, ...this.from }));
				uni.showToast({
					title: '修改成功',
					icon: 'success',
					duration: 500
				});
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'error',
					duration: 500
				});
			}
		},
		gosetting() {
			uni.navigateTo({
				url: '/pages/setting/setting'
			});
		},
		back() {
			uni.navigateBack();
		},
		radioChange(e) {
			this.from.sex = e.detail.value;
		},
		toggleShowContent() {
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				success: (res) => {
					const tempFilePaths = res.tempFilePaths; //图片临时数组
					this.showangle = true;
					this.imgurl = tempFilePaths[0];
				}
			});
		}
	}
};
</script>

<style lang="scss">
.userinfo-setting {
	background-color: #f2f3f7;
	height: 100vh;
	.header {
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		/* 自定义导航栏 */
		.status_title {
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			height: 100.061rpx;
			padding: 0 16px;
			background-color: #ffffff;
		}
		.status_left {
			width: 24px !important;
		}
		.status_center {
			font-size: 17px;
			font-weight: 700;
		}
		.status_right {
			width: 22px;
		}
		.save {
			color: #0fb09b;
			font-size: 20rpx;
		}
	}
	.user-avater {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 298rpx;
		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 50%;
		}
		p {
			margin-top: 24rpx;
			color: #999999;
			font-size: 24rpx;
		}
	}

	.user-info {
		padding: 0px 32rpx;
		.info-title {
			color: #999999;
			font-size: 24rpx;
		}
		::v-deep {
			.wu-cell {
				background-color: #fff;
				border-radius: 16rpx;
				margin-top: 16rpx;
			}
			.wu-cell__body {
				padding: 20px !important ;
			}
			.wu-cell__title-text {
				font-size: 20rpx;
			}
			.uni-radio-input-checked {
				background-color: #0fb09b !important;
				border-color: #0fb09b !important ;
			}
			.uni-radio-wrapper {
				margin-left: 10px;
			}
			.uni-input-wrapper {
				width: 50px;
			}
		}
	}
}
</style>
